<style scoped>
  .fill-box{
    border-radius: 5px;
    padding:30px;
    height: 120px;
    box-sizing: border-box;
  }
  .quota-wrap{
    position: relative;
  }
  .quatemark{
    display: inline-block;
    position: absolute;
    border: 1px solid #dfdfdf;
    padding: 0 5px;
    border-radius: 5px;
    right: -50px;
    top: -15px;
  }
  .title{
    line-height: 32px;
    padding: 0 10px;
  }
  .fa-check-circle{margin-right:5px;position: relative;top: 1px;}
  .check-bg {
    background:#04cab3;
  }
</style>
<template>
  <wrap :title="title">
    <div slot="page">
      <div class="light-bg bg">
        <div class="fill-box light text-center">
          <p class="title">{{autoPassFlag?'可用额度':'系统评估需要补充资料，预计获得的额度'}}</p>
          <span class="margin-top quota-wrap font-18">
              ￥&nbsp;<span class="font-30">{{quota}}</span>
            <span v-if="autoPassFlag" class="quatemark font-12 ">待激活</span>
          </span>
        </div>
      </div>
      <p class="grey-9 title">{{autoPassFlag?'完成个人资料以激活额度':'请完成以下资料以便工作人员尽快为您审核'}}</p>
      <div class="light-bg">
        <div class="fill-item border-bottom flex flex-align-center">
            <span class="label font-15">实名认证</span>
            <i class="fa fa-check-circle fa-lg green" v-if="addition.verifiedImg"></i>
            <router-link class="fill-data grey-9" :to="'/fill/identity'">
              {{addition.verifiedImg?'已完成':'请上传身份证图片'}}
              <i class="fa fa-angle-right font-24"></i> 
            </router-link>
          </div>
          <div class="fill-item border-bottom flex flex-align-center">
            <span class="label font-15">社交信息</span>
            <i class="fa fa-check-circle fa-lg green" v-if="addition.socialInfo"></i>
            <router-link class="fill-data grey-9" :to="'/fill/society'">
              {{addition.socialInfo?'已完成':'请补充社交信息'}}
              <i class="fa fa-angle-right font-24"></i> 
            </router-link>
          </div>
          <div v-if="applyType === 1">
            <div class="fill-item border-bottom flex flex-align-center">
              <span class="label font-15">工作信息</span>
              <i class="fa fa-check-circle fa-lg green" v-if="addition.companyInfo"></i>      
              <router-link class="fill-data grey-9" :to="'/fill/job'">                  
                {{addition.companyInfo?'已完成':'请补充工作信息'}}
                <i class="fa fa-angle-right font-24"></i> 
              </router-link>
            </div>
          </div>
          <div v-else-if="applyType === 2">
            <div class="fill-item border-bottom flex flex-align-center">
              <span class="label font-15">学校信息</span>
              <i class="fa fa-check-circle fa-lg green" v-if="addition.schoolInfo"></i>     
              <router-link class="fill-data grey-9" :to="'/fill/school'">                  
                {{addition.schoolInfo?'已完成':'请补充学校信息'}}
                <i class="fa fa-angle-right font-24"></i> 
              </router-link>
            </div>
            <div class="fill-item border-bottom flex flex-align-center">
              <span class="label font-15">学生证明</span>
              <i class="fa fa-check-circle fa-lg green" v-if="addition.studentImg"></i>     
              <router-link class="fill-data grey-9" :to="'/fill/student'">               
                {{addition.studentImg?'已完成':'请上传学生证明'}}
                <i class="fa fa-angle-right font-24"></i> 
              </router-link>
            </div>
          </div>
      </div>
      <a href="javascript:;" :class="['next-btn',nextEnable?'red-bg':'grey-9-bg','font-16']" @click="next()">{{autoPassFlag === true ?'激活白条':'提交人工审核'}}</a>
      <!-- <a href="/m/account" class="next-btn red-bg font-16">测试</a> -->
    </div>
  </wrap>
</template>
<script>
  import wrap from '../../components/wrap.vue'
  export default {
    components: { wrap },
    data () {
      return {
        title: '审核详情',
        autoPassFlag: false,
        applyType: 0,
        quota: '',
        nextEnable: false,
        addition: {
          verifiedImg: false,
          socialInfo: false,
          companyInfo: false,
          schoolInfo: false,
          studentImg: false
        }
      }
    },
    created () {
      const self = this
      if (self.$route.query.auditType === true) {
        self.title = '激活额度'
        document.title = self.title
      } else {
        self.title = '审核详情'
        document.title = self.title
      }
      this.fetchData()
      this.$watch('addition', function () {
        if (self.applyType === 1) {
          if (self.addition.verifiedImg && self.addition.socialInfo && self.addition.companyInfo) {
            self.nextEnable = true
            console.log(self.nextEnable)
          } else {
            self.nextEnable = false
          }
        } else if (self.applyType === 2) {
          if (self.addition.verifiedImg && self.addition.socialInfo && self.addition.schoolInfo && self.addition.studentImg) {
            self.nextEnable = true
          } else {
            self.nextEnable = false
          }
        }
      }, {deep: true})
    },
    methods: {
      fetchData () {
        const self = this
        self.$Indicator.open()
        self.$api.detail.getAuditType().then(res => {
          self.$Indicator.close()
          if (res.code === 0) {
            let data = res.data
            self.autoPassFlag = data.autoPassFlag
            self.applyType = data.type
            self.quota = data.quota
            self.addition = data.addition
          } else {
            self.$Toast(res.userMsg ? res.userMsg : res.msg ? res.msg : res.code)
          }
        })
      },
      next () {
        const self = this
        if (!self.nextEnable) {
          return
        }
        if (!self.autoPassFlag) {
          // self.$router.push('/detail/')
          self.$Indicator.open()
          self.$api.fill.submitManual().then(res => {
            self.$Indicator.close()
            if (res.code === 0) {
              self.$router.push('/detail/')
            } else {
              self.$Toast(res.userMsg)
            }
          }).always(function () {
            self.$Indicator.close()
          })
        } else {
          self.$Indicator.open()
          self.$api.fill.getQuota().then(res => {
            self.$Indicator.close()
            if (res.code === 0) {
              window.location.href = '/m/account'
            } else {
              self.$Toast(res.userMsg)
            }
          }).always(function () {
            self.$Indicator.close()
          })
        }
      }
    }
  }
</script>
<style scoped>
  .bg{
    width: 10rem;
    height: 4.5rem;
    background: url(../../assets/images/addition.png) no-repeat;
    background-size: cover;
  }
</style>